<template>
  <div class="spendList">
    <div id="myEchart" v-if="account!==0">
    </div>
    <p id="myEchart-item">{{year}}年{{month}}月总共消费{{account}}元</p>
    <div class="spendList-list">
      <div class="spendList-header" v-bind:style="listItem">
        <p>{{title}}。（点击上图可查询各消费分类的记录）</p>
      </div>
      <ul>
        <li v-for="data in spendList" v-on:click="checkDetail($event)">
          <div class="list-logo" v-bind:class="data.category_logo" v-bind:style="listLogo"></div>
          <div class="spendList-content">
            <p>{{data.spendCategory.split('>')[1].toString()}}</p>
            <p class="spendList-date">{{data.spendDate}} {{data.spendTime}}</p>
            <p class="spendList-other">
              <strong>备注</strong>：{{data.description==''?'暂无':data.description}}<br>
              <strong>类型</strong>：{{data.spendAccount}}<br><i v-bind:class="data.account_logo"></i>
            </p>
          </div>
          <div class="spendList-money">{{data.spendMoney}}元</div>
        </li>
        <li class="spendList-empty" v-show="spendList.length===0">
          <i class="fa fa-exclamation-triangle fa-3x"></i><br>
          本月好像没有记录什么消费哦
        </li>
        <li class="spendList-end" v-show="isEmpty">( ¯▽¯；)没有啦</li>
      </ul>
    </div>
    <dialogBox v-bind:message="error" v-bind:href="location" id="dialog"></dialogBox>
    <selectMonth v-on:resultDate='changeMonth'></selectMonth>
    <backTop></backTop>
  </div>
</template>

<script>
    import dialogBox from '../public/dialog-box/dialog-box.vue'
    import backTop from '../public/backTop/backTop.vue'
    import selectMonth from '../public/selectMonth/selectMonth.vue'
    export default {
        name: '',
        data () {
            return {
                account:0,    //记录本月消费总和
                error:'',
                location:'',
                spendMoneyJson:{   //各种消费种类的总和
                  eating:0,
                  closing:0,
                  living:0,
                  traffic:0,
                  community:0,
                  entertainment:0,
                  study:0,
                  human:0,
                  medical:0,
                  financial:0,
                  other:0
              },
              title:'本月最新消费',   //列表标题
              listItem:{
                'border-bottom-color':'#FF6666'
              },
              listLogo:{
                 'background-color':'#FF6666'
              },
              isEmpty:false,  //请求是否为空，是为true
              year:new Date().getFullYear(),
              month:new Date().getMonth()+1,
              limit:5,
              start:0,
              spendList:[]     //显示消费信息列表的数据
            }
        },
      components:{dialogBox,backTop,selectMonth},
      mounted:function () {
          $('#dialog').hide();
          this.requestAccount();
          this.slideBottom();

        $('#spendPage').addClass('clicked');
        $('#spendPage').siblings().removeClass('clicked');
        },
      methods:{
            initPie:function () { //初始化饼状图
              let that=this;
              let myChart=echarts.init(document.getElementById('myEchart'));
              myChart.setOption(
                {
                  title:{
                    text:'本月消费记录汇总',
                    textStyle:{
                      fontSize:15,
                      fontWeight:400
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    x:'left',
                    bottom:0,
                    itemGap:5,
                    selectedMode:true,
                    data:['食品酒水','衣服饰品','居家物业','行车交通','交流通讯','休闲娱乐','学习进修','人情来往','医疗保健','金融保险','其他杂项']
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
                  series: [
                    {
                      name:'本月消费汇总',
                      type:'pie',
                      radius: ['50%', '75%'],
                      center:['60%','50%'],
                      avoidLabelOverlap: false,
                      label: {
                        normal: {
                          show: false,
                          position: 'center'
                        },
                        emphasis: {
                          show: true,
                          textStyle: {
                            fontSize: '15',
                            fontWeight: 'bold'
                          }
                        }
                      },
                      labelLine: {
                        normal: {
                          show: false
                        }
                      },
                      data:[
                        {value:that.spendMoneyJson.eating, name:'食品酒水'},
                        {value:that.spendMoneyJson.closing, name:'衣服饰品'},
                        {value:that.spendMoneyJson.living, name:'居家物业'},
                        {value:that.spendMoneyJson.traffic, name:'行车交通'},
                        {value:that.spendMoneyJson.community, name:'交流通讯'},
                        {value:that.spendMoneyJson.entertainment, name:'休闲娱乐'},
                        {value:that.spendMoneyJson.study, name:'学习进修'},
                        {value:that.spendMoneyJson.human, name:'人情来往'},
                        {value:that.spendMoneyJson.medical, name:'医疗保健'},
                        {value:that.spendMoneyJson.financial, name:'金融保险'},
                        {value:that.spendMoneyJson.other, name:'其他杂项'}
                      ]
                    },
//                    {
//                      name:'食品酒水',
//                      type:'pie',
//                      selectedMode: 'single',
//                      radius : [0, '50%'],
//                      itemStyle : {
//                        normal : {
//                          label : {
//                            position : 'inner'
//                          },
//                          labelLine : {
//                            show : false
//                          }
//                        }
//                      },
//                      data:[
//                        {value:500, name:'早午晚餐'},
//                        {value:100, name:'烟酒茶'},
//                        {value:300, name:'水果零食'}
//                      ]
//                    },
                  ],
                  //color:['#0099FF','#0099CC','#009999','#009966','#009933','#009900','#0066FF','#0066CC','#006699','#006666']
                });
              myChart.off('click');
              myChart.on('click',function (params) {
                that.start=0;
                that.spendList=[];
                that.isEmpty=false;
                that.requestEachSpendCategory(params.name,that.limit,that.start);
                that.title=params.name;
                that.listItem['border-bottom-color']=params.color;
                that.listLogo['background-color']=params.color;
              })
            },
            requestAccount:function () {
              let that=this;
              let year=that.year;
              let month=that.month;
              this.$ajax.get('/api/accountSpend',{
                params:{
                  date:year+'-'+month,
                  token:sessionStorage.getItem('token'),
                  user_id:sessionStorage.getItem('id'),
                }
              }).then(function (response) {
                  that.account=response.data.result.resultAccount;
                  that.spendMoneyJson.eating=response.data.result.spendMoneyJson.eating;
                  that.spendMoneyJson.closing=response.data.result.spendMoneyJson.closing;
                  that.spendMoneyJson.living=response.data.result.spendMoneyJson.living;
                  that.spendMoneyJson.traffic=response.data.result.spendMoneyJson.traffic;
                  that.spendMoneyJson.community=response.data.result.spendMoneyJson.community;
                  that.spendMoneyJson.entertainment=response.data.result.spendMoneyJson.entertainment;
                  that.spendMoneyJson.study=response.data.result.spendMoneyJson.study;
                  that.spendMoneyJson.human=response.data.result.spendMoneyJson.human;
                  that.spendMoneyJson.medical=response.data.result.spendMoneyJson.medical;
                  that.spendMoneyJson.financial=response.data.result.spendMoneyJson.financial;
                  that.spendMoneyJson.other=response.data.result.spendMoneyJson.other;
              }).then(function () {
                that.initPie();
                that.requestSpendList();
              }).catch(function (error) {
                if(error.response){
                  that.error=error.response.data.error.message||error.response.data.error;
                  that.location='/#/login'
                  $('#dialog').show();
                  $('#loading').hide();
                }
              })
            },
            requestSpendList:function () {
              let that=this;
              let year=that.year;
              let month=that.month;
              this.$ajax.get('/api/spendCategory',{
                params:{
                  date:year+'-'+month,
                  token:sessionStorage.getItem('token'),
                  user_id:sessionStorage.getItem('id'),
                }
              }).then(function (response) {
                  that.spendList=response.data.result;
              }).catch(function (error) {
                if(error.response){
                  that.error=error.response.data.error.message||error.response.data.error;
                  that.location='/#/login'
                  $('#dialog').show();
                  $('#loading').hide();
                }
              })
            },
            requestEachSpendCategory:function (name,limit,start) {
              let that=this;
              let year=that.year;
              let month=that.month;
              this.$ajax.get('/api/spendEachCategory',{
                params:{
                  date:year+'-'+month,
                  token:sessionStorage.getItem('token'),
                  user_id:sessionStorage.getItem('id'),
                  spendCategory:name,
                  limit:limit,
                  start:start
                }
              }).then(function (response) {
                if(response.data.result.length===0){
                  that.isEmpty=true;
                  that.start=0;  //目前由于太喜欢操作dom，用这个赋值方法可以避免start值随便自加
                }else{
                  response.data.result.forEach(function (value,index) {
                    that.spendList.push(value);
                  })
                }
              }).catch(function (error) {
                if(error.response){
                  that.error=error.response.data.error.message||error.response.data.error;
                  that.location='/#/login';
                  $('#dialog').show();
                  $('#loading').hide();
                }
              })
            },
            slideBottom:function () {
              let that=this;
              $(window).scroll(function () {
                let scrollTop = $(this).scrollTop();
                let scrollHeight = $(document).height();
                let windowHeight = $(this).height();
                if(scrollTop + windowHeight == scrollHeight&&that.isEmpty===false){
                  that.start+=5;
                  that.requestEachSpendCategory(that.title,that.limit,that.start);
                }
              })
            },
           changeMonth:function (data) {
             let that=this;
             if(that.month!==1&&data===1){
                 that.month-=1;
             }else if(that.month===1&&data===1){
                 that.year-=1;
                 that.month=12;
             } else if(that.month!==12&&data===0){
                 that.month+=1;
             }else if(that.month===12&&data===0){
                 that.year+=1;
                 that.month=1;
             }
             that.spendList=[];
             that.start=0;
             that.isEmpty=false;
             that.title='本月最新消费';
             that.listItem['border-bottom-color']='#FF6666';
             that.listLogo['background-color']='#FF6666';
             that.requestAccount();
           },
           checkDetail:function (e) {
             $(e.currentTarget).find('.spendList-other').slideToggle();
             $(e.currentTarget).siblings().find('.spendList-other').slideUp();
           }
      }
    }
</script>

<style>
  @import "../../assets/css/font-awesome.min.css";
  @import "css/spendList.css";
</style>
